<template>
	<s-layout title="编辑商品详情">
		<view class="content">
			<view class="top">
				<view class="meau">
					<view class="meau-item" @click="addContent('text')">
						<view><image src="/static/coustom/t.png"></image></view>
						<view>添加文字</view>
					</view>
					<view class="meau-item" @click="addContent('img')">
						<view><image src="/static/coustom/img.png"></image></view>
						<view>添加图片</view>
					</view>
				</view>
			</view>
			
			<!-- 自定义内容 -->
			<view class="rich" :style="{ top: coustomType == 'custom' ? '210rpx' : '108rpx' }">
				<view class="label" v-for="(label, index) in paramsObj.contentList" :key="index">
					<view class="label-text" v-if="label.type == 'text'">
						<!-- <textarea  v-model="label.content" auto-height :maxlength="-1"></textarea> -->
						<rich-text :nodes="label.content" @click="editInfo(label.content,index)"></rich-text>
						<!-- <richTextEditor @input="editorInfo" v-model="label.content"></richTextEditor> -->
					</view>
					<view class="label-image" v-if="label.type == 'img'"><image :src="label.content" mode="widthFix"></image></view>
					<view class="lalel-video" v-if="label.type == 'video'">
						<video :src="label.content" :autoplay="false" :page-gesture="true" :poster="label.firstFrame"  objectFit="cover" ></video>
					</view>
					<view class="label-control" v-if="label.type != 'text'" :class="label.type == 'text' ? 'text-label-control' : ''">
						<view class="control-item" @click="sortLabel('topping', label, index)">
							<image src="/static/coustom/zhiding.png"></image>
							<view>置顶</view>
						</view>
						<view class="control-item" @click="sortLabel('up', label, index)">
							<image src="/static/coustom/up.png"></image>
							<view>上移</view>
						</view>
						<view class="control-item" @click="sortLabel('down', label, index)">
							<image src="/static/coustom/down.png"></image>
							<view>下移</view>
						</view>
						<view class="control-item" @click="sortLabel('delect', label, index)">
							<image src="/static/coustom/delect.png"></image>
							<view>删除</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="btn-back save" @click="saveRichInfo">保存</view>
			<!-- 自定义内容 -->
			<model-comp :modeldata="modeldata" :showModel="showCartModel" :textvalue="s_textvalue" :isedit="s_isedit" 
			:editindex="s_editindex" :label="label" @cancal="showCartModel = false" @confim="saveDataInfo"></model-comp>
		</view>
	</s-layout>
</template>


<script>
	import sheep from '@/sheep';
import modelComp from './rich-text.vue';
// import { uploadFile } from '@/api/common.js';
export default {
	components: {
		modelComp
	},
	data() {
		return {
			//客服
			modeldata: {
				title: '标题',
				image: ''
			},
			label: 'text',
			showCartModel: false,
			paramsObj: {
				name: '公司介绍',
				contentList: []
			},
			modelName: '',
			coustomType: 'company',
			maringTop: 0,
			customIndex:null,
			
			s_isedit:false,
			s_editindex:0,
			s_textvalue:'',
		};
	},
	onLoad(options) {
		console.log(options)
		//自定义编辑
		if(options.customIndex){
			this.customIndex = options.customIndex
		}
		this.coustomType = options.infoType || '';
		if (options.coustomData != '') {
			this.paramsObj.contentList = JSON.parse(decodeURIComponent(options.coustomData)) || [];
		}
		if(options.infoType == 'custom'){
			this.modelName = options.modelName
		}
	},
	onHide() {
		// uni.$off('richTextSave')
	},
	methods: {
		/**
		 * @添加自定义内容
		 */
		addContent(type, value) {
			switch (type) {
				case 'text':
					this.s_textvalue = ''
					this.s_isedit = false
					this.s_editindex = null
					this.showCartModel = true;
					break;
				case 'img':
				this.uploadImg()
					break;
				case 'video':
				this.uploadVideo()
					break;
				default:
					break;
			}
			this.label = type;
		},
		editInfo(s_value,s_index){
			this.s_textvalue = s_value
			this.s_isedit = true
			this.s_editindex = s_index
			this.showCartModel = true;
		},
		/**
		 * @排序
		 */
		sortLabel(type, item, index) {
			let arr = this.paramsObj.contentList;
			let length = this.paramsObj.contentList.length;
			if (type == 'delect') {
				this.paramsObj.contentList = this.swopItems(arr, index, 0, type);
				return;
			}
			if (type == 'topping') {
				this.paramsObj.contentList = this.swopItems(arr, index, 0, type);
				return;
			}
			let index2 = type == 'up' ? index - 1 : index + 1;
			if (arr[index2] === undefined) {
				return;
			}
			this.paramsObj.contentList = this.swopItems(arr, index, index2, type);
		},
		/**
		 * @交换数组元素
		 */
		swopItems(arr, index, index2, type) {
			if (type == 'delect') {
				arr.splice(index, 1);
				return arr;
			}
			if (type == 'topping') {
				let data = arr[index];
				arr.splice(index, 1);
				arr.unshift(data);
				return arr;
			}
			arr[index] = arr.splice(index2, 1, arr[index])[0];
			return arr;
		},
		/**
		 * @按照分类组合数据
		 * @保存数据
		 */
		saveDataInfo(propsInfo) {
			let obj;
			if (propsInfo.label == 'img') {
				obj = {
					type: propsInfo.label,
					content: propsInfo.value.url,
					pixel: propsInfo.value.pixel,
					size: propsInfo.value.size
				};
			}
			if (propsInfo.label == 'video') {
				obj = {
					type: propsInfo.label,
					content: propsInfo.value.url,
					firstFrame:propsInfo.value.firstFrame,
					pixel: propsInfo.value.pixel,
					duration: propsInfo.value.duration
				};
			}
			if (propsInfo.label == 'text') {
				console.log(propsInfo,'194')
				obj = {
					type: propsInfo.label,
					content: propsInfo.value
				};
				if(propsInfo.isedit){
					this.paramsObj.contentList.splice(propsInfo.valueindex,1,obj)
					this.showCartModel = false;
					return
				}
			}
			this.paramsObj.contentList.push(obj);
			this.showCartModel = false;
		},
		/**
		 * @保存
		 */
		saveRichInfo() {
			console.log(this.modelName == '');
			if (this.coustomType == 'custom' && !this.modelName) {
				this.$u.Toast('请填写模块名称!');
				return;
			}
			if (this.paramsObj.contentList.length <= 0) {
				uni.showToast({
				  title: '请填写内容!',
				  icon: 'none'
				});
				return;
			}
			let name = this.coustomTypeValue(this.coustomType);
			let params = {
				name: name,
				contentList: this.paramsObj.contentList
			};
			//自定义编辑
			if(this.customIndex){
				params.customIndex = this.customIndex
			}
			uni.$emit('richTextSave', params);
			this.params = {
				name: '',
				contentList: []
			}
			// this.$u.navBack(1);
			uni.navigateBack()
		},
		coustomTypeValue(key) {
			let arr = {
				company: '公司介绍',
				service: '服务介绍',
				custom: this.modelName
			};
			return arr[key];
		},
		/**
		 * @上传图片
		 */
		uploadImg() {
			let imgInfo = {
				url: '', //地址
				pixel: '', //宽高
				size: '' //大小
			};
			uni.chooseImage({
				count: 5,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'], //从相册选择
				success: async imageRes => {
					imgInfo.size = imageRes.tempFiles[0].size;
					uni.showLoading({
						title: '上传中...'
					});
					let i = 0;
					for (let tempFilePath of imageRes.tempFilePaths) {
						i++;
						let { url,fullurl } = await sheep.$api.app.upload(tempFilePath, 'default');
						imgInfo.url = fullurl;
						if (imageRes.tempFilePaths.length <= i) {
							uni.hideLoading();
						}
						uni.getImageInfo({
							src: imgInfo.url,
							success: res1 => {
								imgInfo.pixel = `${res1.width} * ${res1.height}`;
							}
						});
						this.saveDataInfo({ label: this.label, value: imgInfo })
					}
				}
			});
		},
		/**
		 * @上传视频
		 */
		uploadVideo() {
			let videoInfo = {
				url: '',
				firstFrame: '',
				pixel: '',
				duration: ''
			};
			uni.chooseVideo({
				compressed: true,
				sourceType: ['album', 'camera'], //相册或拍摄
				maxDuration: 60,
				success: videoRes => {
					console.log(videoRes,'videoRes');
					videoInfo.duration = videoRes.duration;
					videoInfo.pixel = `${videoRes.width} * ${videoRes.height}`;
					uni.showLoading({
						title: '上传中...'
					});
					uploadFile(videoRes.tempFilePath).then(res => {
						uploadFile(videoRes.thumbTempFilePath).then(res => {
							videoInfo.firstFrame = res.url;
						});
						videoInfo.url = res.url;
						uni.hideLoading();
						this.saveDataInfo({ label: this.label, value: videoInfo })
					});
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	.top {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 998;
		.meau {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			height: 100rpx;
			border-bottom: 1rpx solid #eee;
			z-index: 999;
			background: #fff;
			.meau-item {
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1px solid #999;
				width: 33%;
				view:nth-child(1) {
					display: flex;
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
				view:nth-child(2) {
					color: #656878;
					font-size: 28rpx;
					font-weight: 400;
					font-family: PingFang SC-Regular, PingFang SC;
					padding-left: 10rpx;
				}
			}
			:last-child {
				border-right: none;
			}
		}
	}

.rich {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		overflow-y: hidden;
		position: absolute;
		z-index: 998;
		height: 80%;
		overflow-y: scroll;
		.label {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			.label-text {
				text-indent: 2em;
				width: 100%;
				padding: 10rpx 0;
				border-bottom: 1rpx solid #eee;
				// padding: 20rpx;
				box-sizing: border-box;
				textarea{
					padding: 10rpx 0;
					width: 100%;
					letter-spacing: 3rpx;
					line-height: 20rpx;
					font-size: 32rpx;
					color: #252e3b;
					font-weight: 400;
					font-family: PingFang SC-Medium, PingFang SC;
				}
			}
			.label-image {
				padding: 10rpx 0;
				width: 96%;
				// height: 350rpx;
				image {
					width: 100%;
					// height: 100%;
				}
			}
			.lalel-video {
				padding: 10rpx 0;
				width: 96%;
				height: 350rpx;
				video {
					width: 100%;
					height: 100%;
				}
			}
			.text-label-control {
				top: 10rpx !important;
				right: 20rpx !important;
			}
			.label-control {
				display: flex;
				justify-content: space-around;
				height: 80rpx;
				width: 300rpx;
				background: rgba(0, 0, 0, 0.5);
				position: absolute;
				top: 30rpx;
				right: 40rpx;
				z-index: 1000;
				.control-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					image {
						width: 30rpx;
						height: 30rpx;
					}
					view {
						color: #fff;
						font-size: 22rpx;
						padding-top: 5rpx;
				}
					}
			}
		}
	}
	.save {
		position: fixed;
		bottom: 80rpx;
		z-index: 999;
		width: 90%;
		left: 5%;
		right: 5%;
		height: 90rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		letter-spacing: 2rpx;
		font-weight: 400;
	}
</style>